آموزش گام به گام HTML : قسمت چهارم





تصاوير در HTML

برچسب <img> و مشخصه src
تصاوير در فايلهای HTML توسط برچسب <img> قرار داده می شوند. اين برچسب، يک برچسب خالی می باشد يعنی نيازی به برچسب انتهايی ندارد و فقط شامل مشخصه های مربوط به خود می باشد. برای مشخص کردن تصويری که بايد در صفحه قرار بگيرد نياز به استفاده از مشخصه src (source) داريم که به وسيله آن آدرس و نام فايل معرفی می شود.
<img src="http://www.you.com/product.gif">
اگر فايل HTML و تصوير در کنار هم قرار داشته باشند می توانيم از <img src="product.gif"> استفاده کنيم و نيازی به ذکر کامل آدرس نيست. مرورگر تصوير را در هرجايی که از برچسب img استفاده کرده ايد قرار خواهد داد. مثلا اگر از اين برچسب بين دو پاراگراف استفاده کرده ايد مرورگر ابتدا پاراگراف اول را نمايش می دهد سپس تصوير و در نهايت پاراگراف ديگر را نشان خواهد داد. به عنوان مثال ديگر اگر عبارت <td><img src="product.gif"></td> را در جدول به کار ببريد يکی از خانه های جدول شامل تصوير product.gif خواهد بود. (در مورد جداول در مبحث بعدی صحبت خواهيم کرد)

مشخصه alt

اين مشخصه برای ايجاد يک متن توصيفی بر روی تصوير به کار می رود؛ و وقتی کاربر ماوس را روی تصوير می برد و برای چند لحظه نگاه می دارد، اين متن در يک کادر کوچک ديده خواهد شد مانند :
<img src="boat.gif" alt="Big Boat">
که باعث ديده شدن عبارت Big Boat در يک کادر کوچک می شود وکاربرد اين مشخصه بيشتر وقتی است که اگر تصوير به دليل هر مشکلی در صفحه ديده نشد کاربر بداند که چه تصويری را نديده است که در اين صورت عبارت مشخصه alt به جای تصوير ديده خواهد شد. مانند :
سعی کنيد در صفحات وبی که می سازد فقط در صورت نياز از تصوير وعکس استفاده کنيد و از زياد کردن حجم صفحه خود بپرهيزيد چون هنگامی که کاربر در اينترنت صفحه شما را می بيند بايد مدت زيادتری برای تکميل شدن نمايش صفحه شما صبر کند و ممکن است اين موضوع کاربر را از ديدن صفحه پشيمان کند !

تصوير پس زمينه

برای اضافه کردن تصويری به پس زمينه صفحه می توانيد از ساختار :
<body background="background.jpg">
استفاده کنيد که به جای background.jpg می توانيد نام هر فايل تصويری ديگری را قرار دهيد. اگر ابعاد تصوير شما از صفحه کوچکتر باشد تصوير تا پر کردن کل صفحه تکرار خواهد شد. پس اگر تصميم داريد که تصويری به پس زمينه خود اضافه کنيد توصيه می شود که از فايلهای کوچکی که می توانند مانند موزائيک در کنار هم قرار گيرند، استفاده کنيد. ضمنا در انتخاب تصوير و انتخاب رنگ متن دقت کنيد تا متن شما خوانايی خود را از دست ندهد. مثال زير در همين رابطه است.

مشخصه align در تصاوير

اين مشخصه طريقه تراز شدن تصاوير و متن را تعيين می کند. مثال زير در همين رابطه است.

* توجه داشته باشيد که تصاوير به طور پيش فرض به صورت align="bottom" قرار خواهند گرفت.
همچنين مشخصه align می تواند طرز قرار گرفتن يک تصوير در کنار يک پاراگراف را تعيين کند که مثلا تصوير در سمت راست پاراگراف قرار گيرد يا در سمت چپ. به مثال زير توجه کنيد.

تغيير ابعاد تصاوير

توسط مشخصه width و height می توانيد ابعاد تصوير را تغيير داده و آن را بزرگتر و يا کوچکتر کنيد. فقط دقت کنيد که ابعاد را متناسب تغيير دهيد چون در غير اين صورت تصوير وضوح و زيبايی خود را از دست خواهد داد.

ساخت لينک بر روی قسمتی از تصوير

برای اين کار بايد از دو برچسب <map> و <area> استفاده کنيد. روش کار بدين صورت است که ناحيه هايی را می خواهيد کاربر با کليک بر روی آن به صفحه ديگری متصل شود را توسط اشکالی مشخص می کنيد. اين اشکال دايره، مستطيل و چند ضلعی خواهند بود که توسط مشخصه shape تعيين می شوند.
*دايره به صورتshape="circle" معرفی می شود و مختصات آن توسط مشخصه coords تعيين می شود. مثلا در coords="39, 41, 32" دو عدد اول مختصات مرکز دايره و عدد سمت راست اندازه شعاع دايره می باشد. مشخصه آشنای href که در برچسب <a> از آن استفاده کرديم، صفحه ای را که کابر با کليک بر ناحيه مشخص شده توسط شکل به آن منتقل خواهد شد را تعيين می کند.
*مستطيل توسط shape="rect" و مختصات قطر آن مثلا توسط coords="77, 12, 112, 72" تعيين می شود که دو عدد سمت چپ مختصات گوشه بالای سمت چپ و دو عدد سمت راست مختصات گوشه پايين سمت راست می باشند.
*برای استفاده از چند ضلعی بايد از shape="polygon" استفاده کنيد و اعداد دوبه دو مختصات گوشه های آن را تعيين می کند : coords="146, 7, 124, 68, 193, 64, 183, 53, 184, 20".
همانطور که در مثال زير می بينيد برچسب <map> مشخصه ای به نام name دارد که توسط آن برچسب <img> با برچسب <map> ارتباط برقرار می کند برای ايجاد اين ارتباط بايد در برچسب <img> از مشخصه usemap استفاده کنيم که مقدار اين مشخصه نام برچسب <map> می باشد. ضمنا نام برچسب <map> بايد همراه با علامت # به کار برده شود. مانند:
usemap="#picture"
مثال زير روش استفاده از برچسب ها و مشخصه های ذکر شده را مشخص خواهد کرد.

ساخت لينک برای تصوير

شما می توانيد با کليک بر روی هر جای تصوير به آدرس مورد نظر متصل شويد برای اينکار بايد از روش زير استفاده کنيد، که در اينجا مثلا با کليک بر روی تصوير buttonnext.gif به صفحه nextpage.htm خواهيد رفت.
<a href="nextpage.htm"><img src="buttonnext.gif" ></a>
ادامه دارد ......
ارسال مقاله توسط عضو محترم سایت با نام کاربری : davidfattahi
/س